<template>
  <u-form ref="form" class="login-form" label-width="0" @submit="onSubmit">
    <form-field name="用户名">
      <u-field
        v-model="form.userName"
        name="userName"
        class="is-active-highlight"
        :class="{ 'is-active': !!form.userName }"
        :rules="rules.userName"
        placeholder="请输入用户名"
        @click-right-icon="form.userName = ''"
      >
        <template #right-icon>
          <i class="clear-field-icon" />
        </template>
      </u-field>
    </form-field>
    <form-field name="密码">
      <u-field
        v-model="form.password"
        name="password"
        class="is-active-highlight"
        :class="{ 'is-active': !!form.password }"
        type="password"
        placeholder="请输入密码"
        :rules="rules.password"
      />
    </form-field>
    <!-- 协议 -->
    <u-field class="login-protocol" :error-message="error.protocol ? '请先阅读协议' : ''">
      <user-protocol slot="input" v-model="form.protocol" />
    </u-field>
    <u-button class="login-submit" round block type="info">{{ btnText }}</u-button>
  </u-form>
</template>

<script>
  import FormField from '@views/login/components/form-field';
  import UserProtocol from '@views/login/components/user-protocol';

  export default {
    components: { FormField, UserProtocol },
    props: {
      btnText: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {
          userName: '',
          password: '',
          mobile: '',
          smsCode: '',
          protocol: false
        },
        rules: {
          userName: [{ required: true, message: '请填写用户名' }],
          password: [{ required: true, message: '请填写密码' }],
          mobile: [{ required: true, message: '请填写手机号' }],
          smsCode: [{ required: true, message: '请填写验证码' }],
          protocol: [{ required: true, message: '' }]
        },
        error: {
          protocol: false
        }
      };
    },
    methods: {
      onSubmit() {
        const { protocol } = this.form;

        this.error.protocol = !protocol;

        if (!protocol) return false;

        this.$emit('success-valid', this.form);
      }
    }
  };
</script>
